<template>
  <div class="app_main">
    <div class="search_box">
      <el-form ref="searchForm" :inline="true" :model="listParams" size="mini">
        <search-form-box :show-more-btn="false">
          <template slot="showSearch">
            <el-form-item label="媒体类型名称" prop="name">
              <el-input v-model="listParams.name" placeholder="请输入媒体类型名称" clearable/>
            </el-form-item>
          </template>
          <template slot="searchBtn">
            <el-form-item>
              <el-button size="mini" type="primary" plain @click="search">查询</el-button>
              <el-button size="mini" type="info" plain @click="resetForm('searchForm')">重置</el-button>
            </el-form-item>
          </template>
        </search-form-box>
      </el-form>
    </div>
    <el-row style="margin-bottom: 10px">
      <el-button size="mini" type="primary" @click="add">新增媒体类型</el-button>
    </el-row>
    <div class="data_box">
      <el-table v-loading="tableLoading" :data="tableData" row-key="id" stripe
                :tree-props="{children: 'children', hasChildren: 'hasChildren'}" border
                size="mini" highlight-current-row default-expand-all
      >
        <el-table-column fixed="left" width="50" type="index" label="序号" align="center">
          <template slot-scope="scope">
            <span>{{ scope.$index + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column label="媒体类型名称" width="300" prop="name" align="center"/>
        <el-table-column label="分类名称" min-width="100" prop="mediaTypeClassificationName" align="center"/>
        <el-table-column label="所属项目类型名称" min-width="100" prop="project_type_name" align="center"/>
        <el-table-column fixed="right" label="操作" width="180" align="center">
          <template slot-scope="scope">
            <el-button-group>
              <el-button icon="el-icon-edit" type="primary" size="mini" @click="editRow(scope.row)">修改</el-button>
            </el-button-group>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-dialog :title="edit ? '修改媒体类型' : '新增媒体类型'" :visible.sync="cuFormDialogVisible" width="30%" center
               @close="closeCuFormDialog"
    >
      <el-form ref="cuForm" :model="cuForm" size="mini" :rules="rules" label-width="80px">
        <el-row>
          <el-form-item label="名称" prop="name">
            <el-input v-model="cuForm.name" placeholder="请输入媒体类型名称"/>
          </el-form-item>
          <el-form-item label="上级类型" prop="pid">
            <el-select v-model="cuForm.pid" style="width: 100%" clearable placeholder="请选择上级类型">
              <el-option v-for="(item,index) in typeArr" :key="index" :value="item.id" :label="item.name"/>
            </el-select>
          </el-form-item>
          <el-form-item v-if="edit" label="分类" prop="classification_id">
            <el-select v-model="cuForm.classification_id" style="width: 100%" clearable placeholder="请选择分类">
              <el-option v-for="(item,index) in classification_arr" :key="index" :value="item.id" :label="item.name"/>
            </el-select>
          </el-form-item>
          <el-form-item label="所属项目" prop="project_sort_id">
            <TreeSelect
              ref="projectTypeTreeSelect"
              v-model="cuForm.project_sort_id"
              :data="projectTypeData"
              :height="250"
              :popover-width="300"
              default-expand-all
              :default-props="{children: 'children',label: 'name'}"
              node-key="id"
              @change="projectTypeChange"
            />
          </el-form-item>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="时长和次数" prop="has_duration_and_times" label-width="140px">
              <el-tooltip :content="'开启后此媒体类型的价格会有时长和次数配置'" placement="top">
                <el-switch v-model="cuForm.has_duration_and_times" active-color="#13ce66" inactive-color="#909399"
                           :active-value="true" :inactive-value="false"
                ></el-switch>
              </el-tooltip>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="多价格配置" prop="has_multiple_spec" label-width="140px">
              <el-tooltip :content="'开启后此媒体类型可以配置多个价格'" placement="top">
                <el-switch v-model="cuForm.has_multiple_spec" active-color="#13ce66" inactive-color="#909399"
                           :active-value="true" :inactive-value="false"
                ></el-switch>
              </el-tooltip>
            </el-form-item>
          </el-col>
		</el-row>
		<el-row>
          <el-col :span="8">
            <el-form-item label="天价格" prop="has_price_day" label-width="140px">
              <el-tooltip :content="'开启后此媒体类型可以配置天价格'" placement="top">
                <el-switch v-model="cuForm.has_price_day" active-color="#13ce66" inactive-color="#909399"
                           :active-value="true" :inactive-value="false"
                ></el-switch>
              </el-tooltip>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="周价格" prop="has_price_week" label-width="140px">
              <el-tooltip :content="'开启后此媒体类型可以配置周价格'" placement="top">
                <el-switch v-model="cuForm.has_price_week" active-color="#13ce66" inactive-color="#909399"
                           :active-value="true" :inactive-value="false"
                ></el-switch>
              </el-tooltip>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="月价格" prop="has_price_month" label-width="140px">
              <el-tooltip :content="'开启后此媒体类型可以配置月价格'" placement="top">
                <el-switch v-model="cuForm.has_price_month" active-color="#13ce66" inactive-color="#909399"
                           :active-value="true" :inactive-value="false"
                ></el-switch>
              </el-tooltip>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="cuFormDialogVisible = false">取 消</el-button>
        <el-button size="mini" type="primary" @click="submit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import SearchFormBox from '@/components/SearchFormBox'
import { allLevel1, edit, list, save } from '@/api/system/media_type'
import TreeSelect from '@/components/TreeSelect'
import { get_list_by_media_type_id } from '@/api/system/media_type_classification'
import { getTreeDictionaryVODataByCode2level } from '@/api/business/setting/dict'

export default {
  name: 'MediaType',
  components: { SearchFormBox, TreeSelect },
  data() {
    return {
      tableData: [],
      tableLoading: false,
      listParams: {
        name: null
      },
      edit: false,
      cuFormDialogVisible: false,
      cuForm: {
        id: null,
        name: null,
        pid: 0,
        classification_id: null,
        has_duration_and_times: true,
        has_price_day: true,
        has_price_week: true,
        has_price_month: true,
        has_multiple_spec: true,
        // has_distinguish_spec: true,
        project_sort_id: null
      },
      classification_arr: [],
      rules: {
        name: [
          { required: true, message: '请输入媒体类型名称', trigger: 'blur' }
        ]
      },
      typeArr: [],
      tmpTableArr: [],
      projectTypeData: []
    }
  },
  created() {
    this.getList()
    this.getMediaTypeArr()
    this.getProjectTypeTreeData()
  },
  methods: {
    getList() {
      this.tableLoading = true
      list(this.listParams).then(res => {
        this.tableLoading = false
        this.tableData = res.data
        this.tmpTableArr = res.data
      }).catch(() => {
        this.tableLoading = false
      })
    },
    search() {
      if (this.listParams.name) {
        let arr = this.handleTableData(this.tmpTableArr)
        this.tableData = arr.filter(item => item.name.indexOf(this.listParams.name) > -1)
      }
    },
    /**
     * 处理后端数据
     */
    handleTableData(arr) {
      let data = []
      arr.forEach(item => {
        data.push(Object.assign({}, item, { children: [] }))
        if (item.children && item.children.length > 0) {
          data = data.concat(this.handleTableData(item.children))
        }
      })
      return data
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
      this.getList()
    },
    getClassificationArr(id) {
      if (id === null || id === undefined) {
        this.$message.error('数据错误')
        return
      }
      get_list_by_media_type_id({ media_type_id: id }).then(res => {
        this.classification_arr = res.data
      })
    },
    add() {
      this.cuFormDialogVisible = true
    },
    editRow(row) {
      this.cuFormDialogVisible = true
      this.edit = true
      this.cuForm = Object.assign({}, row)
      this.$nextTick(() => {
        if (this.cuForm.project_sort_id) {
          this.$refs.projectTypeTreeSelect.checkSelectedNode([this.cuForm.project_sort_id])
        } else {
          this.$refs.projectTypeTreeSelect.clearSelectedNode()
        }
      })
      this.getClassificationArr(this.cuForm.id)
    },
    submit() {
      this.$refs.cuForm.validate(valid => {
        if (valid) {
          const loading = this.$loading({
            lock: true,
            text: '提交中',
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.7)'
          })
          if (this.edit) {
            edit(this.cuForm).then(res => {
              if (res.data) {
                this.$message.success('操作成功')
              }
              this.cuFormDialogVisible = false
              this.getList()
              this.getMediaTypeArr()
              loading.close()
            }).catch(() => {
              loading.close()
            })
          } else {
            save(this.cuForm).then(res => {
              if (res.data) {
                this.$message.success('操作成功')
              }
              this.getList()
              this.getMediaTypeArr()
              loading.close()
              this.cuFormDialogVisible = false
            }).catch(() => {
              loading.close()
            })
          }
        }
      })
    },
    getMediaTypeArr() {
      allLevel1().then(res => {
        this.typeArr = res.data
        this.typeArr.unshift({
          id: 0,
          name: '无'
        })
      })
    },
    /**
     * 获取项目类型的树形数据
     */
    getProjectTypeTreeData() {
      getTreeDictionaryVODataByCode2level({ code: 'xmxg-fl' }).then(res => {
        this.projectTypeData = res.data
      })
    },
    projectTypeChange(val) {
      this.cuForm.project_sort_id = val
    },
    openCuFormDialog() {
      this.cuFormDialogVisible = true
      this.$refs.projectTypeTreeSelect.clearSelectedNode()
    },
    closeCuFormDialog() {
      this.cuForm = {
        id: null,
        name: null,
        pid: 0,
        classification_id: null,
        has_duration_and_times: true,
        has_price_day: true,
        has_price_week: true,
        has_price_month: true,
        has_multiple_spec: true,
        // has_distinguish_spec: true,
        project_sort_id: null
      }
      this.edit = false
      this.$nextTick(() => {
        this.$refs.cuForm.clearValidate()
      })
    }
  }
}
</script>

<style scoped>
.app_main {
  padding: 20px 20px 0 20px;
}
</style>
